import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import styles from '../../assets/css/Echart/DepartmentEchart.module.css';

function DepartmentEchart(props: any) {
    useEffect(() => {
        // 第一个图表：病情分析柱状图
        const chartDom = document.getElementById('diseaseAnalysisChart')!;
        const myChart = echarts.init(chartDom);
        // 示例数据
        const data = [42, 72, 621]; // 每组的具体数量
        const total = data.reduce((sum, val) => sum + val, 0); // 计算总人数
        const percentages = data.map((value) => ((value / total) * 100).toFixed(1)); // 计算百分比
        // 配置ECharts图表选项
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                top: '20%',
                containLabel: true,
            },
            xAxis: {
                type: 'value',
                show: false, // 隐藏x轴
            },
            yAxis: {
                type: 'category',
                data: ['病危', '病重', '普通'], // 示例数据
                axisLine: { show: false }, // 隐藏y轴轴线
                splitLine: { show: false }, // 隐藏y轴网格线
                axisTick: { show: false }, // 隐藏刻度
                axisLabel: {
                    color: '#ffffff',
                }
            },
            series: [
                {
                    name: '病例数',
                    type: 'bar',
                    data: data, // 示例数据
                    barWidth: '40%', // 控制柱子的宽度
                    itemStyle: {
                        // 使用不同的颜色为每个柱子设置颜色
                        color: (params: any) => {
                            const colors = ['#542927', '#544327', '#0f5b53'];
                            return colors[params.dataIndex];
                        },
                        borderColor: (params: any) => {
                            const borderColors = ['#218c82', '#a8702d', '#92a2a8']; // 边框颜色比柱子颜色亮
                            return borderColors[params.dataIndex];
                        },
                        borderWidth: 2, // 设置边框宽度
                    },
                    label: {
                        show: true,
                        position: 'right', // 在柱子末端显示标签
                        formatter: (params: any) => {
                            // 格式化为 "数量 (百分比)"
                            return `${params.value}人 (${percentages[params.dataIndex]}%)`;
                        },
                        fontSize: 12, // 标签字体大小
                        color: '#FFF', // 标签颜色
                    },
                },
            ],
        };
        // 渲染图表
        myChart.setOption(option);
        // 第二个图表：参保类型饼图
        const pieChartDom = document.getElementById('insuranceChart')!;
        const pieChart = echarts.init(pieChartDom);
        const echartData = [
            { name: "市医保", value: 321 },
            { name: "自费", value: 221 },
            { name: "新农合", value: 321 },
            { name: "省医保", value: 121 }
        ];
        const totalPie = echartData.reduce((a, b) => a + b.value, 0);
        const colorList = [
            { start: '#de275f', end: '#DBD0F4' },
            { start: '#fbae29', end: '#63430f' },
            { start: '#26defb', end: '#1d82a9' },
            { start: '#125c59', end: '#23d2af' }
        ];
        const pieOption = {
            tooltip: {
                trigger: 'item'
            },
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: '医保类型', // 中间显示的文字
                        font: '15px Arial', // 字体大小和类型
                        fill: '#FFF', // 文字颜色
                        textAlign: 'center',
                    },
                }
            ],
            series: [
                {
                    type: 'pie',
                    radius: ['68%', '60%'],
                    center: ['50%', '50%'],
                    data: echartData.map((item, index) => ({
                        ...item,
                        itemStyle: {
                            color: '#FFF',
                            normal: {
                                borderWidth: 0,
                                borderColor: '#fff',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: colorList[index % colorList.length].start },
                                        { offset: 1, color: colorList[index % colorList.length].end },
                                    ]
                                }
                            }
                        }
                    })),
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 80
                        }
                    },
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    '{name|' + params.name + '}\n{value|' +
                                    (params.value / totalPie * 100).toFixed(2) + '%' + '}'
                                );
                            },
                            rich: {
                                name: {
                                    fontSize: 12,
                                    padding: [0, 0, 0, 10],
                                    color: '#FFF'
                                },
                                value: {
                                    fontSize: 12,
                                    fontWeight: 'bolder',
                                    padding: [10, 0, 0, 20],
                                    color: '#26cee5'
                                }
                            }
                        }
                    },
                }
            ]
        };
        pieChart.setOption(pieOption);

        // 第三个图表
        const populationDom = document.getElementById('medicalPopulationChart')!;
        const populationChart = echarts.init(populationDom);
        const threeOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                left: 'center',
                top: '5%', // 将 legend 放置在图表顶部
                show: true,
                type: 'scroll',
                textStyle: {
                    color: '#ffffff', // 设置文字颜色
                },
                selected: { // 默认显示的系列
                    '男': true,
                    '女': true,
                },
            },
            grid: [{
                left: '5%',
                width: '41%',
                containLabel: true,
                bottom: 60
            },
            {
                right: '5%',
                width: '48%',
                containLabel: true,
                bottom: 60
            },
            ],
            xAxis: [
                {
                    type: 'value',
                    gridIndex: 0,
                    nameTextStyle: {
                        color: 'rgba(255,255,255,0.8)',
                    },
                    inverse: true,
                    splitLine: {
                        show: false,
                    },
                },
                {
                    type: 'value',
                    nameTextStyle: {
                        color: 'rgba(255,255,255,0.8)',
                    },
                    gridIndex: 1,
                    inverse: false,
                    splitLine: {
                        show: false,
                    },
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: { show: false },
                    gridIndex: 0,
                    position: 'right',
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
            ],
            series: [
                {
                    name: '男', // 设置系列名称
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    barWidth: 8,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            1,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: '#0c4946',
                                },
                                {
                                    offset: 1,
                                    color: '#0c4946',
                                },
                            ],
                            false,
                        ),
                        borderColor: '#207f77',
                        barBorderRadius: 0,
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                },
                {
                    name: '女', // 设置系列名称
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    barWidth: 8,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            1,
                            0,
                            0,
                            0,
                            [
                                {
                                    offset: 0,
                                    color: '#3f214a',
                                },
                                {
                                    offset: 1,
                                    color: '#3f214a',
                                },
                            ],
                            false,
                        ),
                        borderColor: '#982f8a',
                        barBorderRadius: 0
                    },
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                },
            ],
            dataset: {
                source: [
                    ['product', '0-1岁', '1-12岁', '13-25岁', '26-40岁', '41-55岁', '56-65岁', '66-75岁', '76-85岁', '85岁以上'],
                    ['男', 19.3, 29.3, 59.3, 79.3, 29.3, 29.3, 59.3, 79.3, 29.3],
                    ['女', 19.3, 29.3, 59.3, 79.3, 29.3, 29.3, 59.3, 79.3, 29.3],
                ]
            }
        };
        populationChart.setOption(threeOption)
        // 销毁实例
        return () => {
            myChart.dispose();
            pieChart.dispose();
        };
    }, []);

    return (
        <div className={styles.body}>
            <div className={styles.left}>
                <div className={styles.left_top}>
                    <header className={styles.left_top_title}>
                        <p>病情分析</p>
                    </header>
                    <div id="diseaseAnalysisChart" style={{ width: '100%', height: '150px' }}></div>
                    <div id="insuranceChart" style={{ width: '100%', height: '200px' }}></div>

                </div>
                <div className={styles.left_bottom}>
                    <header className={styles.left_top_title}>
                        <p>手术量排名</p>
                    </header>
                    <main className={styles.left_bottom_main}>
                        <div style={{ flex: '0 0 5rem' }} className={styles.title_box}><div className={styles.triangle}></div>序号</div>
                        <div style={{ flex: '0 0 13rem' }} className={styles.title_box}><div className={styles.triangle}></div>名称</div>
                        <div className={styles.title_box}><div className={styles.triangle}></div>数量</div>
                    </main>
                    <footer className={styles.left_bottom_footer}>
                        <ul className={styles.list_ul}>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>ICU患者收治率</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>402</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>02</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>crbs发病率</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>398</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>03</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>患者标化病死指数</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>372</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>04</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>感染性休克治疗</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>301</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>05</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>静脉曲张治疗</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>252</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>06</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>血栓扩张治疗</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>201</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 4rem' }} className={styles.li_one}>07</div>
                                <div style={{ flex: '0 0 13rem' }} className={styles.li_two}>ICU转入治疗</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>163</div>
                            </li>
                        </ul>
                    </footer>
                </div>
            </div>
            <div className={styles.center}>
                <div className={styles.left_top}>
                    <header className={styles.left_top_title}>
                        <p>住院情况</p>
                    </header>
                    <div className={styles.center_left_top_center}>
                        <i className={styles.leftImg}></i>
                        <i className={styles.rightImg}></i>
                    </div>
                    <div className={styles.center_left_top_bottom}>
                        <i className={styles.bottomImg}></i>
                    </div>
                </div>
                <div className={styles.left_bottom}>
                    <header className={styles.left_top_title}>
                        <p>科室床位一览表</p>
                    </header>
                    <main className={styles.left_bottom_main}>
                        <div style={{ flex: '0 0 5rem' }} className={styles.title_box}><div className={styles.triangle}></div>床位</div>
                        <div style={{ flex: '0 0 5rem' }} className={styles.title_box}><div className={styles.triangle}></div>姓名</div>
                        <div style={{ flex: '0 0 8rem' }} className={styles.title_box}><div className={styles.triangle}></div>责任医生</div>
                        <div className={styles.title_box}><div className={styles.triangle}></div>诊断</div>
                    </main>
                    <footer className={styles.left_bottom_footer}>
                        <ul className={styles.list_ul}>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                        </ul>
                    </footer>
                </div>
            </div>
            <div className={styles.right}>
                <div className={styles.left_top}>
                    <header className={styles.left_top_title}>
                        <p>就医人群统计</p>
                    </header>
                    <div id="medicalPopulationChart" style={{ width: '100%', height: '100%' }}></div>

                </div>
                <div className={styles.left_bottom}>
                    <header className={styles.left_top_title}>
                        <p>风险统计</p>
                    </header>
                    <main className={styles.left_bottom_main}>
                        <div style={{ flex: '0 0 5rem' }} className={styles.title_box}><div className={styles.triangle}></div>序号</div>
                        <div style={{ flex: '0 0 8rem' }} className={styles.title_box}><div className={styles.triangle}></div>风险事件</div>
                        <div style={{ flex: '0 0 8rem' }} className={styles.title_box}><div className={styles.triangle}></div>等级</div>
                        <div className={styles.title_box}><div className={styles.triangle}></div>评分</div>
                    </main>
                    <footer className={styles.left_bottom_footer}>
                        <ul className={styles.list_ul}>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                            <li className={styles.list_li}>
                                <div style={{ flex: '0 0 5rem' }} className={styles.li_one}>01</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>立明好</div>
                                <div style={{ flex: '0 0 7rem' }} className={styles.li_two}>徐志摩</div>
                                <div style={{ color: '#31b885' }} className={styles.li_three}>阑尾炎</div>
                            </li>
                        </ul>
                    </footer>
                </div>
            </div>
        </div>
    );
}

export default DepartmentEchart;
